<template>
    <div class="le-dialog" v-show="showBox">
        <div class="box">
            <div class="head" v-if="title" v-text="title"></div>
            <div class="body" v-html="content"></div>

            <div class="footer" :class="{'confirm-box-footer':showCancelBtn}">
                <button class="btn-ok" @click="okFunc">{{okVal}}</button>
                <button v-if="showCancelBtn" class="btn-cancel" @click="cancelFunc">{{cancelVal}}</button>
            </div>
        </div>
        <div class="mask"></div>
        <!-- <rc-mask></rc-mask> -->
    </div>
</template>
<script type="text/javascript">
// import Mask from '@/components/mask'

export default {
    name: 'rc-message-box',
    data() {
        return {

        };
    },
    components: {
        // 'rc-mask': Mask
    },
    props: {
        showBox: {
            type: Boolean,
            default: false
        },
        showCancelBtn: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: '',
        },
        content: {
            type: String,
            default: '请输入提示内容'
        },
        contentType: {
            type: String,
            default: 'text'
        },
        okVal: {
            type: String,
            default: '确定'
        },
        ok: {
            type: Function,
            default: () => {}
        },
        cancelVal: {
            type: String,
            default: '取消'
        },
        cancel: {
            type: Function,
            default: () => {}
        },
        close: {
            type: Function,
            default: () => {}
        }
    },
    methods: {
        okFunc() {
            if (typeof this.ok !== 'function') {
                this.destroy();
            } else {
                var okReturn = this.ok(),
                    okReturnIsUndefined = typeof okReturn == 'undefined';
                if (okReturnIsUndefined || (!okReturnIsUndefined && okReturn)) {
                    this.destroy();
                }
            }
        },
        cancelFunc() {
            this.destroy();
            this.cancel && this.cancel();
        },
        destroy() {console.log(this.contentType)
            this.showBox = false;
            this.$el.remove();
            if (this.close && typeof this.close !== 'function') {
                this.close();
            }
        }
    }
}
</script>

<style lang="less" scoped>
.le-dialog{
	width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 20002;
	display: flex; align-items: center; justify-content: center;
	.box{
		min-width: 400px; z-index: 20005; animation-duration: 0.3s; overflow: hidden;
        border-radius: 5px; background: #f4f5f7; box-sizing: border-box; box-shadow: 0 1px 10px 1px #333;
		.head{
			font-size: 20px; line-height: 48px; text-indent: 12px; color: #333; border-radius: 5px 5px 0 0; border-bottom: 1px solid #ddd;
		}
		.body{
			padding: 20px; text-align: center; color: #555;
        }
        .footer{
            background: #fff; border-top: 1px solid #e7e7e7; height: 48px; line-height: 48px;
            button{
                float: left; height: 40px; line-height: 40px; font-weight: 400; margin-top: 4px;
                display: inline-block; font-size: 20px; box-sizing: border-box;
                background: #fff; border: 0; outline: none; cursor: pointer;
                &.btn-ok{
                    width: 100%; color: #189dff;
                }
                &.btn-cancel{
                    display: none; color: #189dff; font-family: 'Microsoft YaHei';
                }
            }
            &.confirm-box-footer {
                .btn-ok {
                    border-right: 1px solid #e7e7e7; width: 50%;
                }
                .btn-cancel {
                    display: inline-block; width: 50%;
                }
            }
        }
	}
}
.mask{
	position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 20000;
}
</style>